<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-24 20:02:45
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-24 22:12:02
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-spacing: 0;
            border-collapse: collapse;
           
            
            margin: 50px auto;
        }
        th,tr,td{
            width: 200px;
            height: 100px;
            border: 1px solid #333333;
            text-align: center;
            line-height: 100px;
        }
        .addInfo{
            position: absolute;
            top: 50%;
            left: 438px;
            background: burlywood;
            display: none;
        }
        .addInfo button{
            float: right;
        }
       
    </style>
</head>
<body>
    <button id="add">新增</button>
    <table>
        <thead>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>爱好</th>
        <th>操作</th>
    </thead>
    <tbody id="content">
    </tbody>
    </table>
    <div class="addInfo">
        <p>姓名<input type="text" id="name"> 年龄 <input type="text" id="age"> 性别 <input type="text" id="sex"> 爱好 <input type="text" id="hobby"></p>
        <button id="cancel">取消</button>
        <button id="add_ele">新增</button>
       
    </div>
    <script>
        var add_ele = document.querySelector("#add_ele");
        var add_btn = document.querySelector("#add");
        var add_info = document.querySelector(".addInfo");
        var _name = document.querySelector("#name");
        var age = document.querySelector("#age");
        var sex =document.querySelector("#sex");
        var hobby = document.querySelector("#hobby");
        var content =document.querySelector("#content");
        var cancle =document.querySelector("#cancel");
        add_btn.onclick = function(){
            add_info.style.display='block';
            document.body.style.background="rgba(0, 0, 0, 0.7)";
            add_ele.onclick = function(){
                content.innerHTML +="<tr>"+
                "<td>"+_name.value+"</td>"+"<td>"+age.value+"</td>"+"<td>"+sex.value+"</td>"+"<td>"+hobby.value+"</td>"+"<td>"+"<button class='up'>上移</button>"+"<button class='down'>下移</button >"+"<button class='del'>删除</button>"
                add_info.style.display='none';
                document.body.style.background="";
                content.onclick=function(e){
                    e = e || window.event;
                   if(e.target.className==='del'){
                      content.removeChild(e.target.parentNode.parentNode);
                   }
                   if(e.target.className==='up'){
                       if(e.target.parentNode.parentNode.previousElementSibling)
                       {var new_node = document.createElement('tr');
                       var ele1 = e.target.parentNode.parentNode;
                        var ele2 = e.target.parentNode.parentNode.previousElementSibling;  
                       ele2.parentNode.insertBefore(new_node,ele2);
                        ele2.parentNode.insertBefore(ele2,ele1);
                        ele2.parentNode.insertBefore(ele1,new_node);
                        ele2.parentNode.removeChild(new_node);
                        }else{
                            alert("已经到顶了,无法交换")
                        }
                   }
                   if(e.target.className==="down"){
                    if(e.target.parentNode.parentNode.nextElementSibling)
                       {var new_node = document.createElement('tr');
                       var ele1 = e.target.parentNode.parentNode;
                        var ele2 = e.target.parentNode.parentNode.nextElementSibling;  
                       ele2.parentNode.insertBefore(new_node,ele2);
                        ele2.parentNode.insertBefore(ele2,ele1);
                        ele2.parentNode.insertBefore(ele1,new_node);
                        ele2.parentNode.removeChild(new_node);
                        }else{
                            alert("已经到底了,无法交换")
                        }
                   }
                  }
                  _name.value="";age.value="";sex.value='';hobby.value='';
            }
            cancle.onclick = function(){
                add_info.style.display='none';
                document.body.style.background="";
            }
        }
        
      </script>
</body>
</html>